import React from "react";
import {Button, Card, Col, Layout, Menu, Row} from 'antd';
import {Footer} from "antd/es/layout/layout";
import {Link} from "react-router-dom";
import axios from "axios";
import Meta from "antd/es/card/Meta";

const {Header, Sider, Content} = Layout;
export default class BookList extends React.Component {
    constructor(props) {
        super(props);
        this.state = ({
            user: this.props.location.state.user,
            bookList: []
        })
    }

    componentDidMount() {
        this.getBookList();
    }

    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    getBookList = () => {
        console.log(this.state.user);
        axios.get("http://localhost:8080/book/bookList", {
            params: {
                userId: this.state.user.userId
            }
        })
            .then(
                (res) => {
                    console.log(res.data);
                    this.setState({
                        bookList: res.data
                    })
                }
            )
    }

    like=(bookId)=>{
        axios.get("http://localhost:8080/like/like",
            {
                params:{
                    userId:this.state.user.userId,
                    bookId:bookId
                }
            }).then(
            (res)=>{
                this.componentDidMount();
            }
        )
    }

    render() {
        return (
            <Layout>
                <Sider
                    breakpoint="lg"
                    collapsedWidth="0"
                    onBreakpoint={broken => {
                        console.log(broken);
                    }}
                    onCollapse={(collapsed, type) => {
                        console.log(collapsed, type);
                    }}
                >
                    <div className="logo"/>
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} style={{marginTop: 80}}>
                        <Menu.Item key="1">
                            <Link to={{
                                pathname: '/BookList',
                                state: {user: this.state.user}
                            }}>图书列表</Link>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Link to={{
                                pathname: '/LikeList',
                                state: {user: this.state.user}
                            }}>收藏列表</Link>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Link to={{
                                pathname: '/RecommendList',
                                state: {user: this.state.user}
                            }}>推荐列表</Link>
                        </Menu.Item>

                    </Menu>
                </Sider>
                <Layout>
                    <Header className="site-layout-sub-header-background" style={{padding: 0}}/>
                    <Content style={{margin: '24px 16px 0'}}>
                        <div className="site-layout-background" style={{padding: 24, minHeight: 510}}>
                            <div className="site-card-wrapper">
                                <Row>
                                    {this.state.bookList.map((value) => {
                                        return (

                                            <Col span={6} style={{padding: 20}}>

                                                    <Card bordered={true}
                                                          style={{border: '1px solid #ddd'}}
                                                          hoverable
                                                          cover={<img alt="example"
                                                                      src={value.bookImgUrl}
                                                                      style={{
                                                                          width: 150,
                                                                          height: 200,
                                                                          margin: '30px auto'
                                                                      }}
                                                          />}
                                                    >
                                                        <a className="bookDetail" target="_blank" href={value.bookUrl}>{value.bookName}</a>

                                                        <div className="bookDetail">{value.bookAuthor}</div>
                                                        <div style={{marginBottom: 10}}></div>

                                                        <Button type="primary" onClick={()=>this.like(value.bookId)}>加入收藏</Button>

                                                    </Card>

                                            </Col>


                                        )
                                    })}

                                </Row>
                            </div>

                        </div>
                    </Content>
                    <Footer style={{textAlign: 'center'}}>Ant Design ©2018 Created by Ant UED</Footer>
                </Layout>
            </Layout>
        );
    }

}